<template>
  <div class="bigBox">
    <div style="background-color: #FFFFFF;padding: 20px">
      <el-button link @click="goBack()">⇦ 返回</el-button>
      <el-divider border-style="double"></el-divider>
      <div style="display: flex;padding: 47px">
        <div class="left">
          <img :src="'http://localhost:8080/api/file/' + message.hanfuImage" width="100%" style="height: 450px">
        </div>
        <div class="right">
          <h1>{{ message.hanfuName }}</h1>
          <div class="div1">￥{{ message.hanfuPrice }}</div>
          <div class="div2">
            <div class="div3">优惠：</div>
            <div class="div4">每300减30，店铺券满399减10，满3件9.5折，购买得积分</div>
          </div>
          <div class="div2">
            <div class="div3">活动：</div>
            <div class="div4">最多送100元，全店通用更划算</div>
          </div>
          <div class="div2">
            <div class="div3">保障：</div>
            <div class="div4">假一赔四，退货运费险，极速退款，7天无理由退换</div>
          </div>
          <div class="div2">
            <div class="div3">配送：</div>
            <div class="div4">快递: 免运费&nbsp;&nbsp;&nbsp;48小时内发货</div>
          </div>
          <div class="div2">
            <div class="div3">品牌：</div>
            <div class="div4">{{ message.hanfuShopName }}</div>
          </div>
          <div class="div2">
            <div class="div3">种类：</div>
            <div class="div4">{{ message.hanfuTypeName }}</div>
          </div>
          <div class="div2">
            <div class="div3">尺码：</div>
            <div class="div4">
              <el-button type="info" :plain="!selectXS" @click="clickXS">xs</el-button>
              <el-button type="info" :plain="!selectS" @click="clickS">s</el-button>
              <el-button type="info" :plain="!selectM" @click="clickM">m</el-button>
              <el-button type="info" :plain="!selectL" @click="clickL">l</el-button>
              <el-button type="info" :plain="!selectXL" @click="clickXL">xl</el-button>
            </div>
          </div>
          <div class="div2">
            <div class="div3">数量：</div>
            <div class="div4">
              <el-button type="info" plain style="width: 30px" :disabled="deleteBt" @click="handleDelete">-</el-button>
              <el-input type="number" style="width: 60px;margin-left: 5px;margin-right: 4px;" v-model="num"/>
              <el-button type="info" plain style="width: 30px" :disabled="addBt" @click="handleAdd">+</el-button>
            </div>
          </div>
          <div style="margin-top: 30px">
            <el-button type="danger" dark round size="large" @click="handleAddToCart">加入购物车</el-button>
            <el-button type="warning" dark round size="large" style="margin-left: 50px" @click="handleToBuy">确认购买</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 信息表单 -->
    <el-dialog v-model="dialogVisible" title="汉服信息修改" width="500">
      <el-input v-model="address" type="textarea" placeholder="请输入收货地址"/>
      <el-button style="display:block;margin:10px auto" type="danger" @click="onSubmit">确定</el-button>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {adminApi, userApi} from "../../api/app";
import {ElMessage} from "element-plus";

const route = useRoute();
const message = ref({});
onMounted(() => {
  if(route.query) {
    Object.assign(message.value,route.query);
    adminApi.getTypeById({
      pageNum: 1,
      pageSize: 1,
      hanfuTypeId: message.value.hanfuTypeId
    }).then(response => {
      message.value.hanfuTypeName = response.records[0].hanfuTypeName;
    })
    adminApi.getShopById({
      pageNum: 1,
      pageSize: 1,
      hanfuShopId: message.value.hanfuShopId
    }).then(response => {
      message.value.hanfuShopName = response.records[0].hanfuShopName;
    })
  }
})

// 数量按钮
const addBt = ref(false);
const deleteBt = ref(true);
const num = ref(1);
const handleDelete = () => {
  if(num.value === 1) deleteBt.value = true;
  else {
    deleteBt.value = false;
    addBt.value = false;
    num.value = num.value - 1;
  }
}
const handleAdd = () => {
  if(num.value === parseInt(message.value.hanfuInventory)) addBt.value = true;
  else {
    addBt.value = false;
    deleteBt.value = false;
    num.value = num.value + 1;
  }
}

// 尺码按钮
const chiMa = ref('M');
const selectXS = ref(false);
const selectS = ref(false);
const selectM = ref(true);
const selectL = ref(false);
const selectXL = ref(false);
// 处理按钮选中事件
const clickXS = () => {
  chiMa.value = 'XS';
  selectXS.value = true;
  selectS.value = false;
  selectM.value = false;
  selectL.value = false;
  selectXL.value = false;
}
const clickS = () => {
  chiMa.value = 'S';
  selectXS.value = false;
  selectS.value = true;
  selectM.value = false;
  selectL.value = false;
  selectXL.value = false;
}
const clickM = () => {
  chiMa.value = 'M';
  selectXS.value = false;
  selectS.value = false;
  selectM.value = true;
  selectL.value = false;
  selectXL.value = false;
}
const clickL = () => {
  chiMa.value = 'L';
  selectXS.value = false;
  selectS.value = false;
  selectM.value = false;
  selectL.value = true;
  selectXL.value = false;
}
const clickXL = () => {
  chiMa.value = 'XL';
  selectXS.value = false;
  selectS.value = false;
  selectM.value = false;
  selectL.value = false;
  selectXL.value = true;
}

// 返回上一页
const router = useRouter();
const goBack = () => {
  router.back();
}

const address = ref();
const dialogVisible = ref(false);

// 加入购物车
const handleAddToCart = () => {
  const customerId = JSON.parse(localStorage.getItem('user')).customerId;
  userApi.addCartInfo({
    customerId: customerId,
    hanfuId: message.value.hanfuId,
    cartSum: num.value,
    cartPrice: message.value.hanfuPrice * num.value,
    cartSize: chiMa.value
  }).then(response => {
    ElMessage({ type: 'success',message: '添加成功！'});
  })
}

// 确认购买
const handleToBuy = () => {
  dialogVisible.value = true;
}
const onSubmit = () => {
  const customerId = JSON.parse(localStorage.getItem('user')).customerId;
  userApi.addOrder({
    customerId: customerId,
    hanfuId: message.value.hanfuId,
    orderSum: num.value,
    orderSize: chiMa.value,
    orderAddress: address.value,
    orderPrice: message.value.hanfuPrice * num.value
  }).then(response => {
    ElMessage({ type: 'success',message: '购买成功！' });
    dialogVisible.value = false;
  })
}
</script>

<style scoped>
.bigBox {
  padding: 0 200px;
}
.left {
  width: 450px;
  margin-right: 50px;
}
.div1 {
  font-size: 20px;
  color: red;
}
.div2 {
  display: flex;
  margin-top: 15px;
}
.div3 {
  color: gray
}
.div4{
  margin-left: 15px
}
</style>